<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凑单品</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            font-size: 17px;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: white;
            cursor: pointer;
        }

        #header {
            background-color: #ff841d;
            height: 50px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            text-align: center;
            color: white;
            font-weight: bold;
            font-size: 19px;
        }

        .cityInfo {
            background-color: tomato;
            height: 40px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cityInfo div {
            cursor: pointer;
            /* flex: 4; */
        }

        #info #uu li {
            border-bottom: 1px solid #ccc;
        }

        #info #uu li:hover {
            cursor: pointer;
            background-color: thistle;
        }

        p {
            color: orangered;
        }

        #main {
            width: 100%;
        }

        #main #mainUl {
            width: 375px;
            height: 100%;
            /* display: flex;
            justify-content: space-between;
            align-items: center; */
        }

        #main #mainUl li img {
            width: 165px;
        }

        #main #mainUl li {
            width: 165px;
            border: 1px solid #ccc;
            height: 280px;
            font-size: 14px;
            float: left;
            margin: 10px;
            font-weight: normal;
        }
        #footer{
            color: black;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header id="header">
        <a href="">&lt;</a>
        <h4>凑单品</h4>
        <a href="">icon</a>
    </header>
    <!-- 城市选择导航 -->
    <nav id="cityNav">
        <div class="cityInfo">
            <div class="shop">▼京东</div>
            <div class="place">▼华北</div>
            <div class="price">免费区</div>
            <div class="icon">icon</div>
        </div>
        <!-- 下拉菜单 -->
        <div id="info">
            <ul id="uu">
                <li></li>
            </ul>
        </div>
    </nav>
    <main id="main">
        <ul id="mainUl">
        </ul>
    </main>
    <footer id="footer">
        <ul>
            <li><a href="">登入</a></li>
            <li><a href="">注册</a></a></li>
            <li><a href="">返回顶部</a></a></li>
        </ul>
    </footer>
    <!-- <p>手机下载</p> -->
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    // 获取每个导航
    let divs = document.querySelectorAll('.cityInfo div')
    // 遍历每个导航
    Array.from(divs).forEach(div => {
        // 判断是否被点击
        this.isClick = false
        div.onclick = function () {
            let className = this.className
            console.log(className)
            if (className === 'shop') {
                let shopDiv = this
                this.isClick = !this.isClick
                // 渲染导航栏列表
                $.ajax({
                    url: 'http://chst.vip:1234/api/getgsshop'
                }).then(res => {
                    let html = ''
                    res.result.forEach(item => {
                        html += ` <li shopId=${item.shopId}>${item.shopName}</li>`
                    })
                    uu.innerHTML = html
                    // 下拉li选项
                    let lis = document.querySelectorAll('li')
                    console.log(lis)
                    Array.from(lis).forEach(li => {
                        li.onclick = function () {
                            uu.style.display = 'none'
                            shopDiv.isClick = false
                            console.log(this)
                            shopDiv.innerText = '▼' + this.innerText
                            let shopid = this.getAttribute('shopId')
                            $.ajax({
                                url: 'http://chst.vip:1234/api/getgsproduct',
                                data: {
                                    shopid,
                                    areaid: 0
                                }
                            }).then(res => {
                                console.log(res)
                                let html = ''
                                Array.from(res.result).forEach(item => {
                                    html += `<li>
                                        <img src="${item.productImg}" alt="">
                                        <b>${item.productName}</b>
                                        <p>${item.productPrice}</p>
                                        </li>`
                                })
                                mainUl.innerHTML = html
                            })
                        }
                    })
                })
                this.innerText = this.isClick ? '▲京东' : '▼京东'
                if (this.isClick) {
                    uu.style.display = 'block'
                } else {
                    uu.style.display = 'none'
                }
            }
        }
    })

</script>